<template>
  <div class="appBox">
    <div class="topBox">
      <TopMenu></TopMenu>
    </div>
    <div class="asideBox">
      <AsideMenu></AsideMenu>
    </div>
    <div class="routerBox">
      <router-view @openLogin="openLogin" />
    </div>
    <Login :login-visible="loginVisible" @openLogin="openLogin"></Login>
  </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import AsideMenu from './components/AsideMenu.vue'
import TopMenu from './components/TopMenu.vue'
import Login from "./components/login.vue"
const loginVisible = ref({ flag: false })

const openLogin = () => {
  console.log('触发')
  loginVisible.value.flag = !loginVisible.value.flag
}
const currentInstance = getCurrentInstance();
let $apiFun = {} as any;
if (currentInstance != null) {
  $apiFun = currentInstance.appContext.config.globalProperties.$apiFun;
}

const item = {
  date: '2023-10-31',
  name: 'Tom',
  address: 'xxxx',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>

<style lang="scss" scoped>
//高度100%
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  font-family: Arial;
}

.appBox {
  position: relative;
  height: 100vh;
  width: 100%;
}

.topBox {
  position: absolute;
  top: 0;
  width: 100%;
  height: 126px;
}

.asideBox {
  width: 240px;
  left: 0;
}

.routerBox {
  right: 0;
  width: calc(100% - 240px);
}

.asideBox,
.routerBox {
  position: absolute;
  top: 126px;
  height: calc(100% - 126px);
}


// //隐藏滚动条
// ::-webkit-scrollbar {
//   width: 0 !important;
// }

// ::-webkit-scrollbar {
//   width: 0 !important;
//   height: 0;
// }
</style>